<template>
  <div class="device-manage">
    <header class="header">
      <TitleName name="设备管理" />
      <el-form
        :inline="true"
        :model="formData"
        size="large"
        class="demo-form-inline"
      >
        <el-form-item label="设备名称:">
          <el-input
            style="width: 400px"
            class="one-ipt"
            v-model="formData.name"
            placeholder="请输入设备名称"
            clearable
          />
        </el-form-item>

        <el-form-item>
          <el-button class="search" type="primary" @click="search"
            >查询</el-button
          >
        </el-form-item>
      </el-form>
      <div class="btn-wrap">
        <button class="enactment" @click="plusDevice">新增设备</button>
        <button class="update" @click="updateDevice">修改设备</button>
        <button class="del" @click="delDevice">删除设备</button>
      </div>
    </header>
    <div class="table-wrap">
      <el-table
        :data="tableData"
        max-height="481"
        border
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" />
        <el-table-column align="center" property="name" label="设备名称" />
        <el-table-column align="center" property="name" label="所属区域" />
        <el-table-column align="center" property="address" label="所属变压器" />
        <el-table-column align="center" property="address" label="所属出线柜" />
        <el-table-column align="center" property="address" label="主机编号" />
        <el-table-column
          align="center"
          property="address"
          label="所属一级分类"
        />
        <el-table-column
          align="center"
          property="address"
          label="所属二级分类"
        />
        <el-table-column align="center" property="address" label="表地址" />
        <el-table-column align="center" property="address" label="在线率" />
        <el-table-column align="center" property="address" label="通讯状况">
          <template v-slot="{ row }">
            <div>
              <img
                class="wifi"
                src="/src/views/Devicemanage/images/online-wifi.png"
                alt=""
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" property="address" label="时间" />
      </el-table>
      <div style="padding-top: 15px">
        <Pagination
          @getDataList="getDataList"
          :pageSize="pageSize"
          :total="total"
          :currentPage="currentPage"
        />
      </div>
    </div>
    <!-- 删除计划 -->
    <Dialog
      class="delDia"
      v-model:visible="delDiaVisible"
      top="20vh"
      width="35%"
      title="确认"
    >
      <template #content>
        <div class="content">确定要删除吗？</div>
      </template>
      <template #footer>
        <div class="footer">
          <button @click="delDiaVisible = false" class="cancel">取消</button>
          <button @click="diaDelSure" class="submit">确定</button>
        </div>
      </template>
    </Dialog>
    <!-- 新增设备 -->
    <DeviceDialog
      :plusTitle="plusTitle"
      v-model:visible="diaPlusDevVisible"
      @plusDialogSure="plusDialogSure"
      v-model:formData="plusDialogSureForm"
    />
  </div>
</template>
<script setup lang="ts">
import TitleName from "../../components/TitleName";
import DeviceDialog from "./component/DevicePlusDialog";
import { ref, reactive, onMounted } from "vue";
let formData = reactive({ name: "", region: "", date: "" });
let pageSize = ref(""); //每页数
let plusTitle = ref("新增设备");
let total = ref(110); // 总数
let plusDialogSureForm = reactive({}); //新增弹框收集数据
let delDiaVisible = ref(false); //弹框删除
let diaPlusDevVisible = ref(false); //弹框新增显示
let currentPage = ref("currentPage"); //当前页
let tableData = reactive([
  { name: "sf", address: "fdsfsd" },
  { name: "sf", address: "fdsfsd" },
  { name: "sf", address: "fdsfsd" },
  { name: "sf", address: "fdsfsd" },
  { name: "sf", address: "fdsfsd" },
  { name: "sf", address: "fdsfsd" },
  { name: "sf", address: "fdsfsd" },
  { name: "sf", address: "fdsfsd" },
  { name: "sf", address: "fdsfsd" },
  { name: "sf", address: "fdsfsd" },
]);

const plusDevice = () => {
  diaPlusDevVisible.value = true;
  plusTitle.value = "新增设备";
};
const updateDevice = () => {
  diaPlusDevVisible.value = true;
  plusTitle.value = "修改设备";
};
const diaDelSure = () => {
  console.log(diaDelSure, "diaDelSure");
};
const delDevice = () => {
  delDiaVisible.value = true;
};
const plusDialogSure = () => {
  console.log(plusDialogSureForm, "plusDialogSureForm");
};
//del弹框中的提交
const submit = () => {};

//修改计划
const updatePlan = () => {};
//获取列表
const getDataList = () => {};
const handleSelectionChange = () => {};
//查询
const search = () => {};
//制定计划弹框 取消
const enactCancel = () => {};
//制定计划弹框 确定
const enactSubmit = () => {};
</script>
<style scoped lang="scss">
.device-manage {
  height: 100%;
  padding: 15px 17px 17px 12px;
  /* box-sizing: border-box; */
  .header {
    :deep(.el-form) {
      margin-top: 31px;
      padding-left: 20px;
    }
    .one-sel {
      width: 337px;
    }
    .one-ipt {
      width: 255px;
    }
    .two-sel {
      width: 198px;
    }
    :deep(.el-form-item__label) {
      font-size: 20px;
      font-weight: 400;
      color: #333333;
      /* margin-top: 3px; */
    }
    :deep(.el-form .el-input__wrapper) {
      box-shadow: none;
    }
    .one-sel,
    .one-ipt,
    .two-sel {
      box-shadow: none !important;

      border: 1px solid #e1e0e0 !important;
      background: #ffffff;
      height: 42px;
      border-radius: 5px;
    }
    .search {
      background: #0250f9;
      border-radius: 5px;
      width: 100px;
      height: 42px;
      line-height: 42px;
      font-weight: 400;
      font-size: 22px;
      color: #ffffff;
    }
    height: 197px;
    background: #ffffff;
    padding-top: 26px;
    width: calc(100vw - 175px);
    box-sizing: border-box;
    .btn-wrap {
      padding-left: 44px;

      button {
        width: 125px;
        height: 42px;
        border-radius: 5px;
        font-size: 22px;
        font-weight: 400;
        color: #ffffff;
        cursor: pointer;
        margin-left: 19px;
        border: none;
      }

      & button:first-child {
        margin-left: 0;
      }

      .search {
        background: #f4b400;
      }
      .del {
        background: #d73d32;
      }
      .update {
        background: #07bd2a;
      }
      .enactment {
        background: #0250f9;
      }
    }
  }
  .table-wrap {
    margin-top: 15px;
    width: calc(100vw - 175px);
    height: calc(100vh - 17px - 227px - 116px);
    box-sizing: border-box;
    background-color: #fff;
    padding: 20px 16px 0 18px;
    :deep(.el-table__body td.el-table__cell) {
      height: 4.5vh !important;
    }
  }
}

.delDia {
  .content {
    font-size: 36px;
    font-weight: 500;
    color: #333333;
    text-align: center;
    margin-top: 50px;
    line-height: 190px;
  }
  .footer {
    display: flex;
    justify-content: center;
    margin-top: 60px;
    padding-bottom: 50px;
    button {
      width: 109px;
      height: 51px;
      border-radius: 5px;
      font-size: 24px;
      font-weight: 500;
      color: #ffffff;
    }
    .cancel {
      background: #d73d32;
    }
    .submit {
      margin-left: 25px;
      background: #0250f9;
    }
  }
}
.wifi {
  width: 25px;
  height: 21px;
}
</style>
